<template>
  <div>
    <div class="h3">
      <img :src="$pre+info.img" alt />
    </div>
    <div class="des">
      <p class="price">
        <span v-if="info.price">{{info.price|filterPrice}}</span>
        <s>{{info.market_price}}</s>
      </p>
      <p>
        <span>{{info.goodsname}}</span>
      </p>
      <p class="info_des" v-html="info.description"></p>
      <p class="xianshi">
        <span>{{info.specsname}}</span>
        <button v-for="item in info.specsattr" :key="item">{{item}}</button>
      </p>
      <p class="info_des">{{info.des2}}</p>
    </div>

    <!-- <div class="nav">
      <router-link :to="'/index/shopCar?id='+$route.query.id">客服</router-link>
      <router-link :to="'/index/shopCar?id='+$route.query.id">店铺</router-link>
      <router-link :to="'/index/shopCar?id='+$route.query.id">购物车</router-link>
      <router-link class="shopCar" :to="'/index/shopCar?id='+$route.query.id">加入购物车</router-link>
      <router-link :to="'/index/shopCar?id='+$route.query.id">立即购买</router-link>
    </div>-->

    <van-button type="primary" @click="add">加入购物车</van-button>
  </div>
</template>

<script>
import { reqDetail, reqAdd } from "../../http/api";
import { Toast } from 'vant';
export default {
  data() {
    return {
      info: {},
    };
  },
  methods: {
    add() {
      reqAdd({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        goodsid: this.info.id,
        num: 1,
      }).then((res) => {
        // console.log(localStorage.getItem("user"));
        if (res.data.code == 200) {
           Toast(res.data.msg);
          //  this.$router.push('/index/shopCar')
        }
      });
    },
  },
  mounted() {
    reqDetail({
      id: this.$route.query.id,
    }).then((res) => {
      // console.log(re);
      this.info = res.data.list[0];
      this.info.specsattr = this.info.specsattr.split(',')
    });
  },
};
</script>

<style scoped>
.nav {
  width: 100%;
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  /* background: forestgreen; */
}
.nav a {
  flex: 1;
  display: block;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.3rem;
  color: black;
}
.nav .shopCar {
  background: tomato;
  font-size: 0.28rem;
  border-radius: 0.2rem;
}
.h3 {
  width: 100%;
  height: 6rem;
  background: turquoise;
  text-align: center;
  line-height: 6rem;
}
.h3 img {
  width: 100%;
  height: 100%;
}
.des {
  font-size: 0.4rem;
}
.des p {
  margin-bottom: 0.4rem;
}
.price span {
  font-size: 0.6rem;
  color: tomato;
}
.price s {
  color: #ccc;
  font-size: 0.4rem;
}
.des .info_des {
  font-size: 0.29rem;
}
.des .xianshi span {
  background: tomato;
  color: white;
}
</style>